<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="table_div">
  <input id="copy_in" style="display: none" />
  <div id="searchParam"  shiro:hasPermission="sysFiles:add">
    <div class="layui-form-item">
      <div class="layui-input-inline ">
        <button type="button" class="layui-btn" id="upload">
          <i class="layui-icon">&#xe67c;</i>上传文件
        </button>
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="sysFiles:delete">删除</button>
  </div>
</script>
<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-xs" lay-event="pre" shiro:hasPermission="sysFiles:list">预览</a>
  <a class="layui-btn layui-btn-xs" lay-event="copy" shiro:hasPermission="sysFiles:list">一键复制</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="sysFiles:delete">删除</a>
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  var upload = layui.upload;
  layui.use(['table', 'layer', 'laydate', 'upload'], function () {

    //加载table
    tableIns1 = table.render({
      elem: '#showTable'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/sysFiles/listByPage' //数据接口
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field: 'fileName', title: '文件名', sort: true},
          {field: 'createDate', title: '创建时间', sort: true},
          {width: 120, toolbar: "#tool", title: '操作', width:200}
        ]
      ]
      , toolbar: '#toolbar'
    });

    //执行实例
    var uploadInst = upload.render({
      elem: '#upload' //绑定元素
      ,url: '/sysFiles/upload?authorization='+tokenQuery //上传接口
      ,done: function(res){
        search();
        //上传完毕回调
      }
      ,error: function(){
        //请求异常回调
      }
    });


    //表头工具
    table.on('toolbar(showTable)', function(obj){
      switch(obj.event){
        case 'batchDeleted':
          var checkStatus = table.checkStatus(obj.config.id);
          var data = checkStatus.data;
          if(data.length==0){
            layer.msg("请选择要批量删除的列");
          }else {
            var ids = [];
            $(data).each(function (index,item) {
              ids.push(item.id);
            });
            tipDialog(ids);
          }
          break;
      };
    });
    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'del':
          var ids=[];
          ids.push(data.id);
          tipDialog(ids);
          break;
        case 'pre':
          //预览
          window.open(data.url,'_blank');
          break;
        case 'copy':
          var Url2=data.url;
          var oInput = document.createElement('input');
          oInput.value = Url2;
          document.body.appendChild(oInput);
          oInput.select(); // 选择对象
          document.execCommand("Copy"); // 执行浏览器复制命令
          oInput.className = 'oInput';
          oInput.style.display='none';
          layer.msg('已复制成功！');
          break;
      }
    });


    //删除
    var tipDialog=function (ids) {
      layer.open({
        content: "确定要删除么?",
        yes: function(index, layero){
          layer.close(index); //如果设定了yes回调，需进行手工关闭
          CoreUtil.sendDelete("/sysFiles/delete",ids,function (res) {
            layer.msg(res.msg, {time:1000},function () {
              search();
            });
          });
        }
      });
    };

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });
  });

  //执行查询
  function search() {
    //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
        key: $("#key").val()
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };
</script>